<ion-item *ngIf="card">
  <ion-icon class="card-icon" item-start>
    <div class="houston">
      <img src="assets/img/mcc-icons/{{card.icon}}.svg" class="svg" />
    </div>
  </ion-icon>
  <h4 text-wrap>
    {{card.merchant.name || 'Unknown Merchant'}}
    <span *ngIf="card.pending && card.transactionId" translate>
      View Confirmation Status
    </span>
  </h4>
  <p class="merchant">
    {{card.merchant.location}}
  </p>
  <ion-note class="amount" item-end text-end>
    <div [ngClass]="{'amount--sent': sent, 'amount--received': received, 'amount--pending': pending}" id="price">
      {{card.price | number:'1.2-2' }} {{currency}}
    </div>
    <div class="date">
      {{card.date}}
    </div>
  </ion-note>
</ion-item>